import React from "react";
import { Button } from 'antd'
// 需要把driver.js 引用进来
import Driver from 'driver.js'
import 'driver.js/dist/driver.min.css'
// 做一个弹框组件
import TypingCard from '@/components/TypingCard'
// 引入step
import step from './step'

// 功能设计
const driver = new Driver({
  animate:true, //  在更改时是否突出显示动画效果
  opacity:0.75,
  doneBtnText:'完成',
  closeBtnText:'关闭',
  nextBtnText:'下一步',
  prevBtnText:'上一步'
})

const openGuide = ()=>{
  driver.defineSteps(step);
  driver.start()
}
const Guide = () => {
  const content = '这个组件提供给大家使用引导方便上手当前系统 <a href="http://baidu.com" target="_blank">百度</a>'
  return (
    <div className="app-container">
      {/* 弹框组件 */}
      <TypingCard title='自己写的新手引导' source={content} />
      <Button type="primary" onClick={openGuide}>打开引导</Button>
    </div>
  );
};

export default Guide;
